<template>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        width="30%">
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="80px">
            <el-form-item v-if="dialogType === 'edit'" label="账号id" prop="username">
                <mt-input v-model="form.id" disabled :width="inputWidth"></mt-input>
            </el-form-item>
            <el-form-item label="账号名称" prop="username">
                <mt-input v-model="form.username" :width="inputWidth"></mt-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <mt-input v-model="form.phone" :width="inputWidth"></mt-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <mt-input v-model="form.email" :width="inputWidth"></mt-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <mt-input v-model="form.companyName" :width="inputWidth"></mt-input>
            </el-form-item>
            <el-form-item label="所属国家">
                <mt-input v-model="form.country" :width="inputWidth"></mt-input>
            </el-form-item>
            <el-form-item label="所属角色" prop="roleId">
                <mt-select
                    v-model="form.roleId"
                    :options="roleList"
                    labelKey="name"
                    valueKey="roleId"
                    :width="inputWidth">
                </mt-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <mt-button @click="handleSubmitBtn">确定</mt-button>
            <mt-button type="submain" @click="handleClose">取消</mt-button>
        </span>
    </el-dialog>
</template>

<script>
import { resetObject } from "@/utils/index.js";
export default {
    name: "AccountDialog",

    data () {
        return {
            form: {
                id: "",
                username: "",
                phone: "",
                email: "",
                roleId: "",
                country: "",
                companyName: ""
            },
            rules: {
                username: [
                    { required: true, message: "请输入账号名称", trigger: "blur" },
                    { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
                ],
                phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
                roleId: [{ required: true, message: "请选择所属角色", trigger: "blur" }]
            },
            dialogType: "add",
            dialogVisible: false,
            inputWidth: "calc(100% - 1rem)"
        };
    },

    computed: {
        title () {
            if (this.dialogType === "add") return "新建账号";
            else return "编辑账号";
        },
        roleList () {
            return this.$store.getters["commonList/GET_ROLELIST"];
        }
    },

    created () {
        if (!this.roleList.length) this.$store.dispatch("commonList/getRoleList");
    },

    mounted () {},

    methods: {
        /* 触发弹窗 */
        open (type = "add", item = {}) {
            this._.assign(this.form, item);
            this.dialogType = type;
            this.dialogVisible = true;
        },

        /* 提交 */
        handleSubmitBtn () {
            // 校验
            this.$refs["form"].validate(valid => {
                if (valid) this.handleSubmit();
                else return false;
            });
        },
        handleSubmit () {
            if (this.dialogType === "add") {
                const params = this._.clone(this.form);
                this.$request.post(this.API.ADD_ACCOUNT, params).then(res => {
                    if (res.success) {
                        this.$mtMessage.success("新增成功！");
                        this.handleClose();
                        this.$emit("update");
                    }
                });
            }
            else if (this.dialogType === "edit") {
                const params = this._.clone(this.form);
                this.$request.post(this.API.UPDATE_ACCOUNT, params).then(res => {
                    if (res.success) {
                        this.$mtMessage.success("修改成功！");
                        this.handleClose();
                        this.$emit("update");
                    }
                });
            }
        },

        /* 关闭弹窗 */
        handleClose () {
            resetObject(this.form);
            this.dialogVisible = false;
        }
    }
}
</script>

<style lang="scss">
</style>